<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- 自定义样式 -->
  <style>
    body {
      padding-top: 5rem;
    }
    .login-container {
      max-width: 400px;
      margin: auto;
    }
  </style>
</head>
<body>
<div class="container login-container">
  <div class="card">
    <div class="card-header">
      Login123
    </div>
    <div class="card-body">
      <form id="loginForm">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username" placeholder="Enter username" required>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password" required>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
      </form>
    </div>
  </div>
</div>

<!-- 引入 Bootstrap JS 和依赖的 jQuery 和 Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 自定义 JavaScript -->
<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    console.log('Username:', username, 'Password:', password); // 打印用户名和密码，实际应用中应避免如此操作
    // 这里可以添加 AJAX 调用或其他 JavaScript 逻辑处理登录
    alert('Login button clicked. Check console for username and password.'); // 简单的提示信息
  });
</script>
</body>
</html>
